<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { Search, View, Hide, VideoCamera } from '@element-plus/icons-vue'
import { type CapSession } from '@/api/cap'
import { getSessionPage } from '@/api/cap'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'

const searchDto = reactive({
  protocol: '',
  status: '0',
})

const timeValue = ref('')

const tableData = ref<CapSession[]>([])
const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1,
})
const onPaginationChange = (curPage: number) => {
  console.log(curPage)
  clickSearchBtn(curPage)
}
const clickSearchBtn = (currPage: number) => {
  pagination.currentPage = currPage
  const d1 = {
    protocol: searchDto.protocol,
    hostId: '',
    status: searchDto.status,
    startTime: '',
    endTime: '',
    pageNum: pagination.currentPage,
    pageSize: pagination.pageSize,
  }
  if (timeValue.value != '') {
    d1.startTime = timeValue.value[0].getTime()
    d1.endTime = timeValue.value[1].getTime()
  }
  getSessionPage(d1).then((res) => {
    tableData.value = res.list
    pagination.total = res.total
  })
}

onMounted(() => {
  clickSearchBtn(1)
})
const clickWatchBtn = (id: string) => {
  console.log(id)
  ElMessage({
    message: '功能开发中 ！',
    type: 'warning',
  })
}
</script>

<template>
  <div>
    <el-card>
      <el-row class="mb-5">
        <el-col>
          <el-select
            v-model="searchDto.protocol"
            placeholder="按协议过滤"
            clearable
            class="mr-5"
            style="width: 140px"
          >
            <el-option label="VNC协议" value="vnc" />
            <el-option label="RDP协议" value="rdp" />
            <el-option label="SH协议" value="sh" />
            <el-option label="CAP协议" value="cap" />
          </el-select>
          <el-select
            v-model="searchDto.status"
            placeholder="按会话状态过滤"
            clearable
            class="mr-5"
            style="width: 140px"
          >
            <el-option label="全部" value="0" />
            <el-option label="握持中" value="2" />
            <el-option label="已注销" value="4" />
          </el-select>
          <el-date-picker
            class="mr-5"
            v-model="timeValue"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
          />
          <el-button type="primary" :icon="Search" @click="clickSearchBtn(1)">查询</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" stripe style="width: 100%" show-overflow-tooltip>
        <el-table-column type="index" width="50" label="#" />
        <el-table-column prop="id" label="会话ID" />
        <el-table-column prop="hostIp" label="目标主机" />
        <el-table-column prop="protocol" label="协议类型" />
        <el-table-column prop="protocol" label="宽高">
          <template #default="scope">
            {{ scope.row.width + ' x ' + scope.row.height }}
          </template>
        </el-table-column>
        <el-table-column prop="protocol" label="创建时间">
          <template #default="scope">
            {{ dayjs(new Date(scope.row.createdAt * 1000)).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column prop="protocol" label="结束时间">
          <template #default="scope">
            {{
              scope.row.disconnectedTime == '0'
                ? '--'
                : dayjs(new Date(scope.row.disconnectedTime * 1000)).format('YYYY-MM-DD HH:mm:ss')
            }}
          </template>
        </el-table-column>
        <el-table-column prop="message" label="提示" />
        <el-table-column prop="status" label="会话状态">
          <template #default="scope">
            <el-text class="mx-1" v-if="scope.row.status == 1">初始化</el-text>
            <el-text class="mx-1" v-if="scope.row.status == 2" type="primary">握持中</el-text>
            <el-text class="mx-1" v-if="scope.row.status == 3" type="success">已断开</el-text>
            <el-text class="mx-1" v-if="scope.row.status == 4" type="info">已注销</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="会话人" />
        <el-table-column fixed="right" label="操作" min-width="80">
          <template #default="scope">
            <el-link
              :icon="scope.row.status == 2 ? View : Hide"
              type="primary"
              :disabled="scope.row.status != 2"
              class="mr-3"
              @click="clickWatchBtn(scope.row.id)"
              >监视</el-link
            >
            <el-link
              :icon="VideoCamera"
              type="primary"
              :disabled="scope.row.status == 2"
              class="mr-3"
              @click="clickWatchBtn(scope.row.id)"
              >录像</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt-5"
        layout="prev, pager, next"
        :hide-on-single-page="pagination.total / pagination.pageSize < 2"
        :total="pagination.total"
        @current-change="onPaginationChange"
      />
    </el-card>
  </div>
</template>

<style scoped></style>
